<template>
    <div class="Forgotpwd">
        <div class="formCon">
            <h2 class="title" v-text="Lang.forgot[lang][0]" />
            <ul class="selectbox">
                <li class="selects cur" :class="{active: signType === 'phone'}" @click="e_type('phone')" v-text="Lang.forgot[lang][1]" />
                <!-- <li class="selects cur" :class="{active: signType === 'email'}" @click="e_type('email')">邮箱验证</li> -->
            </ul>
            <div class="forgotForm">
                <c-form/>
            </div>

            <!-- <c-form/> -->
        </div>
    </div>
</template>

<script>
import Lang from './lang.js'
import {vpost, vlink} from '@api'
import Cform from './forgotform'
export default {
	name: 'ForgotPwd',
	data() {
		return {
			signType: 'phone',
			// msgback: '',
			Lang,
		}
	},
	components: {
		'c-form': Cform,
	},
	mounted() {},
	computed: {
		lang() {
			return this.$store.state.setting.lang
		},
	},
	methods: {
		//   未来切换邮箱
		e_type(s) {
			this.signType = s
		},
	},
}
</script>

<style scoped>
.Forgotpwd {
	margin: 0 auto;
	min-height: 100vh;
	white-space: nowrap;
}
.formCon {
	width: 520px;
	height: 400px;
	/* background-color: aliceblue; */
	margin-top: 150px;
	margin-left: 355px;
}
.title {
	margin: 0;
	font-size: 36px;
	font-weight: 400;
	color: #c7cce6;
}
.selectbox {
	height: 34px;
	line-height: 34px;
	margin-top: 20px;
	margin-bottom: 20px;
}
.selects {
	height: 34px;
	display: inline-block;
	font-size: 16px;
	margin-right: 60px;
	color: #c7cce6;
}
.active {
	color: #7a98f7;
	border-bottom: 2px solid #7a98f7;
}
.label {
	margin-bottom: 5px;
	margin-top: 15px;
	color: #61688a;
	font-size: 14px;
}
.btn {
	margin-top: 20px;
}
.dialog {
	color: var(--clr0);
}
.hmsg {
	padding: 0 20px;
}
.imgcode {
	width: 75%;
}
.img {
	border-radius: 4px;
	height: 48px;
}
.forgotForm {
	display: flex;
	flex-direction: column;
}
</style>
